<template>
  <div style="margin-top: 40px">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      :disabled="readOnly"
    >
      <el-form-item v-show="false" label="id：" prop="id">
        <el-input v-model="ruleForm.id" />
      </el-form-item>
      <el-form-item label="菜品类别：" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入菜品类别名称" />
      </el-form-item>
    </el-form>
    <div align="center" style="margin-top: 50px">
      <el-button @click="readOnly?handleEdit():handleSave()">{{ readOnly?'编辑':'保存' }}</el-button>
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getWbeRoot } from '../../api/web-site'
import sessionStorage from '../../assets/js/storage'

export default {
  name: 'DishesTypeDetails',

  data () {
    return {
      foodTypeId: '',
      readOnly: '',

      ruleForm: {
        id: '',
        name: '',
        userId: '',
        createTime: '',
        updateTime: '',
        isDel: ''
      },

      rules: {
        name: [
          { required: true, message: '请输入菜品分类名称', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    if (sessionStorage.getItem('type') === 'view') {
      this.foodTypeId = sessionStorage.getItem('id')
      this.readOnly = true
      this.getFormData(this.foodTypeId)
    } else if (sessionStorage.getItem('type') === 'edit') {
      this.foodTypeId = sessionStorage.getItem('id')
      this.readOnly = false
      this.getFormData(this.foodTypeId)
    } else if (sessionStorage.getItem('type') === 'add') {
      this.readOnly = false
      this.ruleForm.userId = sessionStorage.getItem('usrId')
    }
  },

  methods: {
    /**
     * 表单数据请求
     */
    getFormData (val) {
      axios.get(getWbeRoot() + '/api/foodType/findById', {
        params: {
          foodTypeId: val
        }
      }).then(
        response => {
          if (response.status === 200) {
            this.ruleForm = response.data
          }
        }
      )
    },

    /**
     * 编辑按钮
     */
    handleEdit () {
      this.readOnly = false
    },

    /**
     * 修改/新增保存
     */
    handleSave () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          axios.post(getWbeRoot() + '/api/foodType/save', this.ruleForm
          ).then(
            response => {
              if (response.data.code === '200') {
                this.$message({
                  showClose: true,
                  message: response.data.msg,
                  type: 'success'
                })
                this.$router.push('variety-of-dishes-type-manage')
              } else {
                this.$message({
                  showClose: true,
                  message: response.data.msg,
                  type: 'error'
                })
              }
            }
          )
        } else {
          return false
        }
      })
    },

    /**
     * 返回
     */
    back () {
      this.$router.push('variety-of-dishes-type-manage')
    }

  }
}
</script>

<style scoped>

</style>
